import React, { Component } from 'react'
import { Button, Modal,Row,Col, message } from 'antd'
import { connect } from 'dva'

// import styles from '../NewAccount/index.less';
import AddWarehouse from './AddWarehouse'
import ModifyWarehouse from './ModifyWarehouse'
import styles from './index.less'

@connect(({cooperativeStore})=>({
    list: cooperativeStore.list,
  }))
export default class WarehouseInfo extends React.Component{
  
    state = {
        modalVisible: false,
        addVisible: false,
        modifyVisible: false,

        Whouse:[],
        val: {}
    }

    queryInfo(){
        const { dispatch } = this.props
        console.log('dispatch......')
        dispatch({
            type: 'cooperativeStore/spsSelectWareHouse',
            payload: {
                data:{
                    "userId": 1
                }
            }
        }).then(res=>{
            if(res.code==200){
                console.log("Whouse:",res)
               this.setState({
                Whouse:res.data
               })
           }
        })
    }
    modifyInfo = (val)=>{
        // console.log('当前仓库id', val)
        let cur = null
        this.state.Whouse.forEach(item => {
            if(item.id == val){
                cur = item
            }
        })
        this.setState({
            val: cur,
            modifyVisible: true
        })
    }
    deleteInfo = (val)=>{
        console.log('delete', val)
        Modal.confirm({
            title: '提醒',
            content: '确定要删除当前的仓库吗？',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk:() =>{
                if(val){
                    const {dispatch}=this.props
                    dispatch({
                        type: 'cooperativeStore/spsWareHouseDelete',
                        payload: {
                            data:{
                                "id":val
                            }
                        }
                    })
                }
                // history.go(0)
                message.success(`删除成功！`)
            },
            onCancel() {
              console.log('Cancel');
            },
        });
    }
    componentDidMount(){
        this.queryInfo()
        console.log('componentDidMount')
    }

    showAddModalNew = () => {
        this.setState({ addVisible: true });
    };
  
    
    handleCancel = () => {
        this.setState({ addVisible: false });
    };
    handleModifyCancel = () => {
        this.setState({ modifyVisible: false });
    };
    
    handleCreate = () => {
        const { form } = this.formRef.props;
        form.validateFields((err, values) => {
            if (err) {
                return;
            }

            console.log('Received values of form: ', values);
            form.resetFields();
            this.setState({ addVisible: false });
        });
    };
    handleModifyCreate = () => {
        const { form } = this.formRef.props;
        form.validateFields((err, values) => {
            if (err) {
                return;
            }

            console.log('Received values of form: ', values);
            form.resetFields();
            this.setState({ modifyVisible: false });
        });
    };


    saveFormRef = formRef => {
        this.formRef = formRef;
    };

    modifyFormRef = formRef => {
        this.formRef = formRef
    }
    render() {
        const content = this.state.Whouse && this.state.Whouse.map((item, index)=>{
            return (
                <div style={{}}>

                
                <div className={styles.warehouse,styles.content} key={item.id} style={{float:"left",width:"350px",marginLeft:"90px",marginTop:"30px",align:"center"}}>
                    <div className={styles.title}>
                        <span style={{fontSize:"20px",fontWeight:"bold"}}>{'仓库'+(index+1)}</span>
                        <div style={{float:"right"}}>
                            <Button style={{marginRight: '15px'}} onClick={()=>{this.modifyInfo(item.id)}}size="small">修改</Button>
                            <Button type="primary" onClick={()=>{this.deleteInfo(item.id)}} size="small">删除</Button>
                        </div>
                    </div>
                    <hr />
                    <p className={`${styles.info} ${styles.first}`}>名称：{item.name}</p>
                    <p className={styles.info}>仓库地址：{item.warehouseAddress}</p>
                    <p className={styles.info}>详细地址：{item.detailedAddress}</p>
                    <p className={styles.info}>对应机场： {item.airportAddress}</p>
                    <p className={styles.info}>货物类型：{item.goodsType}</p>
                    <p className={styles.info}>业务联系人：{item.contactName}</p>
                    <p className={styles.info}>联系电话：{item.contactNumber}</p>
                    <div style={{clear:"both"}}></div>
                </div>
                </div>
            )
        })
        return (
            <div className={styles.content}>
                <div className={styles.headerBox}>
                <Row>
                    <Col span={8}>
                        <span className={styles.header} style={{fontSize:"16px"}}>仓库信息</span>
                    </Col>
                    <Col span={2} offset={14}>
                        <Button type="primary" onClick={this.showAddModalNew}>新增仓库</Button>
                    </Col>
                </Row>
                    
                    
                </div>
                {content}
                {/* 新增仓库地址  {(e) => this.deleteRow(id, e)} */}
                <AddWarehouse
                    wrappedComponentRef={this.saveFormRef}
                    visible={this.state.addVisible}
                    onCancel={this.handleCancel}
                    onCreate={this.handleCreate}
                />
                <ModifyWarehouse
                    wrappedComponentRef={ this.modifyFormRef}
                    visible={this.state.modifyVisible}
                    onCancel={this.handleModifyCancel}
                    onCreate={this.handleModifyCreate}
                    val={this.state.val}
                    // txt={this.state.Whouse}
                />
            </div>
        )
    }
}